<template>
  <div class="sys_monitor">
    <div :id="id" :style="{'width': '100%', 'height': '100%'}"></div>
  </div>
</template>

<script>
export default {
name: "SystemMonitor",
  data(){
    return{
      orgOptions: {},
      id: 'system_monitor_charts',
      chart: {}
    }
  },

  mounted() {
    this.initCharts()
  },

  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },

  methods: {
    initCharts(){
      this.chart = this.$echarts.init(document.getElementById(this.id))
      var option = {
        tooltip: {
          formatter: '{a} <br/>{b} : {c}%'
        },
        series: [{
          name: '系统监控',
          type: 'gauge',
          anchor: {
            show: true,
            showAbove: true,
            size: 18,
            itemStyle: {
              color: '#FAC858'
            }
          },
          pointer: {
            icon: 'path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z',
            width: 8,
            length: '80%',
            offsetCenter: [0, '8%']
          },

          progress: {
            show: true,
            overlap: true,
            roundCap: true
          },
          axisLine: {
            roundCap: true
          },
          data: [{
            value: 20,
            name: '处理器',
            title: {
              offsetCenter: ['-40%', '80%']
            },
            detail: {
              offsetCenter: ['-40%', '95%']
            }
          },
            {
              value: 40,
              name: '内存',
              title: {
                offsetCenter: ['0%', '80%']
              },
              detail: {
                offsetCenter: ['0%', '95%']
              }
            },
            {
              value: 60,
              name: '存储',
              title: {
                offsetCenter: ['40%', '80%']
              },
              detail: {
                offsetCenter: ['40%', '95%']
              }
            }
          ],
          title: {
            fontSize: 14
          },
          detail: {
            width: 40,
            height: 14,
            fontSize: 14,
            color: '#fff',
            backgroundColor: 'auto',
            borderRadius: 3,
            formatter: '{value}%'
          }
        }]
      };
      // 使用刚指定的配置项和数据显示图表。
      this.chart.setOption(option);
    }
  }
}
</script>

<style scoped>
.sys_monitor{
  width: 30%;
  height: 25rem;
  border-radius: .5rem;
  background: rgba(255,255,255,0.5);
  float: left;
  position: absolute;
  top: 53%;
  left: 42%;
}
</style>